<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>登录</title>
    <!--    <link rel="stylesheet" href="../css/style.scss" />-->
    <link href="../css/style.css" rel="stylesheet">
</head>

<style>
    .sphere {
        display: none;
    }

    .active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
</style>
<body>
<div id="app">
    <div class="content">
        <div class="left">
            <img alt="people" class="people p-animtion" src="../asset/img2.png"/>

            <!-- <img src="./asset/2.png" class="sphere s-animtion" alt="sphere" /> -->
            <img
                    alt="sphere"
                    class="sphere active s-animation"
                    src="../asset/1.png"
            />
            <img alt="sphere" class="sphere s-animation" src="../asset/2.png"/>
            <img alt="sphere" class="sphere s-animation" src="../asset/3.png"/>
            <img alt="sphere" class="sphere s-animation" src="../asset/4.png"/>
            <img alt="sphere" class="sphere s-animation" src="../asset/5.png"/>
        </div>
        <div class="right">
            <div class="top">
                <div class="top-item">
                    <a class="top-text" href="index.html">首页</a>
                </div>
                <div class="top-item">
                    <span @click="change('login')" class="top-text">登录</span>
                </div>
                <div class="top-item">
                    <span @click="change('reg')" class="top-text">注册</span>
                </div>
                <div class="top-item">
                    <span class="top-text">帮助</span>
                </div>
            </div>
            <div class="form-wrappepr" id="login">
                <h1>登录</h1>
                <input @blur="doEmailOrPhone" class="inputs user" placeholder="输入邮箱或手机号码" type="text"
                       v-model="emailOrPhone"
                />
                <input class="inputs pwd" placeholder="输入密码" type="password" v-model="user.userPassword"/>
                <span class="tips">忘记密码</span>
                <button @click="doLogin">登录</button>
                <div class="other-login">
                    <div class="divider">
                        <span class="line"></span>
                        <span class="divider-text">其他方式登录</span>
                        <span class="line"></span>
                    </div>
                    <div class="other-login-wrapper">
                        <div class="other-login-item">
                            <img alt="QQ" src="../asset/QQ.png"/>
                        </div>
                        <div class="other-login-item">
                            <img alt="WeChat" src="../asset/WeChat.png"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-wrappepr" id="reg" style="display: none">
                <h1>注册</h1>
                <input
                        @blur="doEmailOrPhone"
                        class="inputss user"
                        placeholder="输入邮箱或手机号码"
                        type="text"
                        v-model="emailOrPhone"
                />
                <button @click="sendCode" style="margin:5px 0">发送验证码</button>
                <input
                        class="inputss code"
                        placeholder="输入验证码"
                        v-model="vcode"
                />
                <input
                        class="inputss pwd"
                        placeholder="输入密码"
                        type="password"
                        v-model="user.userPassword"
                />
                <input
                        class="inputss pwd"
                        placeholder="确认密码"
                        type="password"
                        v-model="pwd2"
                />

                <button @click="doReg">注册</button>
            </div>
        </div>
    </div>
</div>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            vcode:'',
            emailOrPhone: '',
            user:
                {
                    email: '',
                    phone: '',
                    userPassword: ''
                },
            pwd2: '',
            code: '',
            isEmail: true,
            ws:null
        },
        created() {
            var url = window.location.href;
            var params = url.split('?')[1];
            var paramArray = params.split('&');
            var toValue = null;
            paramArray.forEach(function (param) {
                var keyValue = param.split('=');
                var key = keyValue[0];
                var value = keyValue[1];
                if (key === 'to') {
                    toValue = value;
                }
            });
            if (toValue === 'reg') {
                document.getElementById("login").style.display = "none";
                document.getElementById("reg").style.display = "block";
            }
        },
        methods: {
            doEmailOrPhone() {
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                const phonePattern = /^\d{11}$/; // 假设手机号码为11位数字
                if (emailPattern.test(this.emailOrPhone)) {
                    console.log(1);
                    this.user.email = this.emailOrPhone;
                } else if (phonePattern.test(this.emailOrPhone)) {
                    this.user.phone = this.emailOrPhone;
                } else {
                    console.log(2);
                    this.isEmail=false;
                    this.$message({
                        message: '请输入正确的邮箱或手机号码',
                        type: 'warning',
                    });
                }
            },
            doLogin() {
                let p = new URLSearchParams();
                p.append("phone", this.user.phone);
                p.append("email", this.user.email);
                p.append("userPassword", this.user.userPassword);
                axios.post("/user/user/login", p).then(res => {
                    if (res.data.code == 1) {
                        sessionStorage.setItem("Token",res.data.data.token);
                        var username = res.data.data.loginedUser.username;
                        sessionStorage.setItem("username",username);
                        var uid=res.data.data.loginedUser.id;
                        sessionStorage.setItem("userid",uid);
                        toIndex();
                    } else {
                        alert(res.data.msg);
                    }
                })
            },
            doReg() {
                if (this.pwd2 != this.user.userPassword) {
                    this.$message({
                        message: '两次密码不同,请重新输入',
                        type: 'warning'
                    });
                } else {
                    let p = new URLSearchParams();
                    p.append("phone", this.user.phone);
                    p.append("email", this.user.email);
                    p.append("vcode", this.vcode);
                    p.append("userPassword", this.user.userPassword);
                    axios.post("/user/user/doReg", p).then(res => {
                        if (res.data.code == 1) {
                            // 注册成功
                            document.getElementById("login").style.display = "block";
                            document.getElementById("reg").style.display = "none";
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                }
            },
            //登录注册切换
            change(form) {
                if (form === "login") {
                    document.getElementById("login").style.display = "block";
                    document.getElementById("reg").style.display = "none";
                } else if (form === "reg") {
                    document.getElementById("login").style.display = "none";
                    document.getElementById("reg").style.display = "block";
                }
            },
            sendCode() {
                if (this.emailOrPhone!==''&& this.isEmail==true){
                    axios.post("/user/user/sendCode", this.emailOrPhone).then(res => {
                        if (res.data.code == 1) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                }else{
                    console.log(this.isEmail);
                    this.$message({
                        message: '请输入正确的邮箱或手机号码',
                        type: 'warning',
                    });
                }
            }
        }
    })
</script>
</body>
<script>
    <!--   登录界面动态显示,星球轮换效果 -->
    document
        .querySelector(".people")
        .addEventListener("animationend", function () {
            this.classList.remove("p-animtion");
            this.classList.add("p-other-animtion");
        });
    document
        .querySelector(".sphere")
        .addEventListener("animationend", function () {
            this.classList.remove("s-animtion");
            this.classList.add("s-other-animtion");
        });

    const images = document.querySelectorAll(".sphere");
    let index = 0;

    function showImage(index) {
        for (let i = 0; i < images.length; i++) {
            images[i].classList.remove("active");
        }
        images[index].classList.add("active");
    }

    function nextImage() {
        index = (index + 1) % images.length;
        showImage(index);
    }

    // 设置定时器，每隔一段时间切换图片
    setInterval(() => {
        nextImage();
    }, 30000); // 每隔 30 秒切换一次图片

    function toIndex(){
        location.href = "/index.html"
    }
</script>

</html>
